<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>首页</title>
	<style type="text/css">
	
		.dianbiao{
      
			width: 100px;
			height: 100px;
			position: absolute;
            left:200px;
            top: 100px;

		}
		.biaoyu{
     
			width: 100px;
			height: 100px;
			position: absolute;
            left:400px;
            top: 150px;
		}
    .denglu{
     width: 30%;
      position: absolute;
            right:10px;
            top: 50px;

    }

		.search{
			color: red;
            margin-left: 750px;
            margin-top: 250px;
           
		}
         p.double {
         	  border-style: double;
              border-color:pink ;
              text-align: right;  
              margin-right: 100px;
              margin-top: 300px; 
               margin-left: 200px;  
              }
        
	   
        .fenlei{
        
        	font-weight: 100px;
        	font-size:35px; 
        	font-family: initial;
        	color:red;
        	position: absolute;
            left:200px;
            top: 340px;
        }

.jutifenlei{
          font-weight:20px;
          font-size:15px; 
          font-family: initial;
          color:black;
          position: absolute;
            left:300px;
            top: 360px;
        }

.tabs{
      width: 500px; 
      height: 500px;
      position: absolute;
            left:200px;
            top: 380px; 
    }
    .tabs-title li{
      width: 25%;
            margin: 0;
            padding: 0;
            list-style: none;
            float: left;
            text-align: center;
    }
    .clear{
      clear: both;
    }
    .text{
         width: 100%;
         height: 300px;
         display: none;
    }
    .show{
      display: block;
    }
    .title:hover{
      color: red;
    }
    .title{
      background-color: red;
    }


		.fenleiyi{width: 200px;
			height: 50px;
			position: absolute;
            left:200px;
            top:580px;}

        .photo11{
	         
             position: absolute;
            left:200px;
            top:650px;
            }
            
            .photo22{
	        
             position: absolute;
            left:520px;
            top:650px;
            }

          .photo33{
             position: absolute;
            left:840px;
            top:650px;
            }
            .photo44{
	         
             position: absolute;
            left:1160px;
            top:650px;
            }




        .fenleier{width: 200px;
			height: 50px;
			position: absolute;
            left:200px;
            top:990px;}

          .photo55{
	         
             position: absolute;
            left:200px;
            top:1070px;
            }
            .photo66{
	         
             position: absolute;
            left:520px;
            top:1070px;
            }
            .photo77{
	         
             position: absolute;
            left:840px;
            top:1070px;
            }
            .photo88{
	         
             position: absolute;
            left:1160px;
            top:1070px;
            }

.part3{
  margin-top:290px; 
}

.top{
  text-align: center;
}
.topone{font-size: 2em;
}
.topthree{
  color: grey;
  opacity: 0.8;
}
.line{
  margin-top: 50px; 
}
.lineone{
  
  margin-left: 250px;
  display: inline-flex;
  flex-direction: column;
  }
.linetwo{
  display: inline-block;
  margin-left: 25px;
  }
.linethree{
  display: inline-block;
  margin-left: 25px;
  vertical-align: top;
  }
.linefour{
  color: grey;
  opacity: 0.8;
  }
.buyone{
  margin-top: 20px;
  margin-left:170px;
}

.linefive{
  margin-top:-10px;
  width:180px;
  height:120px;
  background-color: #FF9224;
  padding-left: 10px;
  padding-right: 10px;
  opacity: 0.8;
  
}

.linesix{
  font-size: 0.9em;
  opacity: 0.9;
}
.line1{
  margin-left: 90px;
  margin-top: 10px;
}
.line2{
  display: inline-block;
  background-color: #FFFCEC;
  height: 230px;
  width: 600px;
  margin-top: 50px;
  margin-left: 170px;
  padding: 10px;
}
.lineone2{
  margin-top: 20px;
  margin-left: 250px;
  display: inline-flex;
  flex-direction: column;
  }
.linefive2{
  width:180px;
  height:120px;
  background-color: white;
  padding-left: 10px;
  padding-right: 10px;
  opacity: 0.8;
}
.lineone2{

  margin-top: 20px;
  margin-left: 250px;
  display: inline-flex;
  flex-direction: column;
  }
.line3{
  float: right;
  margin-right: 290px;
  margin-top: 20px;
}

.dao1{
      margin-top: 50px;
      font-size: 30px;  
}
.dao2{
      
      font-size: 30px;  
}
.dao3{
    
      font-size: 30px;  
}.dao4{
      
      font-size: 30px;  
}

.dao
     {width:150px;
      height:500px;
      background-color:#ebe6e7 ;
      margin-top: 70px;
      }
 .daotaitle{
      border: 5px;
      list-style: none;
      font-size:25px;
      text-align: center;
      width:100px;
     }

      .daotaitle:hover{
      color:pink;
     }
      .daotaitle:active{
        background-color: #4eeaec;}

        .shangpinleibiao{margin-top: 90px;

}
.all{
  width:1070px;
  background-color: pink;
  margin:0 auto;
  
}
.title5{
      font-size:60px;
    text-align: center;
}
.name
{background-color: pink;
width:49%;
margin:0px;
float:left;
font-size:30px;
}
.price
{background-color: pink;
width:123px;
height:40px;
margin-top:45px;
font-size:20px;

}
.cart
{background-color: pink;
margin:0;
width:49%;
height:90px;
float:right;
font-size:20px;
}


.thing1,.thing2,.thing3,.thing4
{float:left;
  width:250px;
  height:350px;
margin:5px;
border: 3px solid black;
text-align: center;
}

.thing5,.thing6,.thing7,.thing8
{float:left;
  width:250px;
  height:350px;

margin:5px;
 border: 3px solid black;
text-align: center;
}


.thing9,.thing10,.thing11,.thing12
{float:left;
  width:250px;
  height:350px;

margin:5px;
border: 3px solid black;
text-align: center;
}


	</style>
</head>
<body>
<p class="double"> 文艺青年：不盲目跟随，不刻意张扬，岁月是静好！     <br>甜美可爱：粉嫩装扮，让你像公主一样美美的去约会！   </p>
<div  class="dao1"><a href="dianshang1.html">①</a>
  
</div>
<div  class="dao2"><a href="子页2.html">②</a>
</div>
<div  class="dao3"><a href="子页3.html">③</a>
  
</div>
<div  class="dao4"><a href="子页4.html">④</a>


<div class="dao">
 <ul>
    <li class="daotaitle">
     <a href="#1">风格上新</a>
    </li>
    <li class="daotaitle">
    <a href="#2">魅力女装</a>
    </li>
    <li class="daotaitle">
    <a href="#3">欧美风牛仔上衣</a>
    </li>
    <li class="daotaitle">
    <a href="#4">秋季新品</a>
    </li>
    <li class="daotaitle"></li>
    <li class="daotaitle"></li>
    <li class="daotaitle"></li>
    <li class="daotaitle"></li>
  </ul>

</div>

  <div>

  	<div class="dianbiao">
  		<img src="1.png">
  	</div>
  	<div  class="biaoyu">
  		<img src="2.jpg">
  	</div>

<div class="denglu">
<form>
<p>用户名</p>
<input type="text" name="firstname">

<p>密码</p>
<input type="text" name="username">
<p>
<input type="submit" value="提交">
</p>
</form> 

</div>



  	<div  class="search">
  		<form action="ziye">
        宝贝：
        <input type="search" name="baobei">
        <input type="submit">
        </form>
  	</div>

    <div>
  	</div>

    <div   class="fenlei">
    分类:
   </div>

   </div>
    <div   class="jutifenlei">
    (动动手指分类更多偶~~)
    </div>

<div  class="tabs">
    <div class="tabs-title">
      <ul>
        <li  class="title">连衣裙</li>
        <li  class="title">毛衫/内搭</li>
        <li  class="title">外套</li> 
        <li  class="title">裤装</li> 
      </ul>
      </div>
      <div   class="clear"></div>
    <div class="tabs-text">
      <div  class="text "><ul>
  <li>半身裙</li>
  <li>针织裙</li>
  <li>打底裙</li>
  <li>复古裙</li>
  <li>修身裙</li>
</ul></div>
      <div  class="text"><ul>
  <li>毛衣</li>
  <li>宽松毛衣</li>
  <li>打底衫</li>
  <li>高领毛衫</li>
  <li>长袖T恤</li>
</ul></div>
      <div  class="text"><ul>
  <li>夹克</li>
  <li>西装</li>
  <li>风衣</li>
  <li>毛呢外套</li>
  <li>牛仔外套</li>
</ul></div>
    </div>

    <div  class="text">
    <ul>
  <li>休闲裤</li>
  <li>打底裤</li>
  <li>牛仔裤</li>
  <li>哈伦裤</li>
  <li>阔腿裤</li>
</ul>
</div>
     </div>

<div class="fenleiyi">
     <a name="1"></a>
      <img src="3.png">
</div>

<div  class="photo11">
  <img src="11.jpg"   width="300px" 
           height="300px" >
</div>
<div  class="photo22">
  <img src="22.jpg"  width="300px" 
           height="300px" >
</div>
<div  class="photo33">
  <img src="33.jpg"   width="300px" 
           height="300px" >
</div>
<div  class="photo44">
  <img src="44.jpg"   width="300px" 
           height="300px" >
</div>


<div class="fenleier">
     <a name="2"></a>
      <img src="4.png">
</div>
<div  class="photo55">
  <img src="55.jpg"   width="300px" 
           height="300px">
</div>
<div  class="photo66">
  <img src="66.jpg"   width="300px" 
           height="300px" >
</div>
<div  class="photo77">
  <img src="77.jpg"   width="300px" 
           height="300px" >
</div>
<div  class="photo88">
  <img src="88.jpg"   width="300px"
           height="300px" >
</div>

  </div>

  <div    class="part3">
        <div class="top">
  <div class="topone">NEW&nbsp;STORE</div>
  <div class="toptwo">厂商直销·急速发货·质量承诺·售后保障</div>
  <div class="topthree">冬季欧美系女装全新上市，八折促销</div>
    </div>

    <div class="line">
    <div class="lineone"><img src="111.jpg" alt="一张模特图" width="200px" height="150px">
      <div class="linefive">秋季新品
        
        <div class="linesix">原创设计,音乐摇滚,水洗做旧牛仔衣.你还是你,我还是我,只是时间褪尽了你我的铅华.</div>
        <div class="line1">
            <a href="内容页">立刻购买&nbsp</a>
        </div>
      </div>
    </div>


    <div class="line2">
      <div class="linetwo">
           <a name="3"></a>
        <img src="222.jpg" alt="一张模特图" width="200px" height="170px"></div>
    <div class="linethree">欧美风牛仔上衣<div class="linefour">简约好搭不挑人，品质牛仔面料设计，<br>衣身小细节吸睛。个性上衣时尚潮流<br>
    两侧兜兜设计贴心加分<br>
    良品&nbsp;&nbsp;平价&nbsp;&nbsp;时尚&nbsp;&nbsp;舒适
    </div>
    <div class="buyone">
        <a href="内容页2">立刻购买&nbsp</a>
    </div>
    </div>
</div>
      


    <div class="lineone2"><img src="333.jpg" alt="一张模特图" width="200px" height="150px">
      <div class="linefive2">秋季新品
        
        <div class="linesix">原创设计,音乐摇滚,水洗做旧牛仔衣.你还是你,我还是我,只是时间褪尽了你我的铅华.</div>
        <div class="line1">
            <a href="内容页3">立刻购买&nbsp</a>
        </div>
      </div>
    </div>

   
     <div class="line3">
      <div class="linetwo">
 <a name="4"></a>
        <img src="444.jpg" alt="一张模特图" width="250px" height="170px"></div>
    <div class="linethree">欧美风牛仔上衣<div class="linefour">简约好搭不挑人，品质牛仔面料设计，<br>衣身小细节吸睛。个性上衣时尚潮流<br>
    两侧兜兜设计贴心加分<br>
    良品&nbsp;&nbsp;平价&nbsp;&nbsp;时尚&nbsp;&nbsp;舒适
    </div>
    <div class="buyone">
        <a href="内容页3">立刻购买&nbsp</a>
    </div>
    </div>
</div>
 


    </div>



  </div>
</div>
 <div  class="shangpinleibiao"><div class="all">  
  <div class="title5">
    商品列表
  </div>
<div class="thing1">
      <img src="8.jpg" alt="" height="250px" width="240">
      <p class="name">情侣风衣</p>
      <p class="cart">加入购物车</p>
        <p class="price">￥399</p>
</div>


<div class="thing2">
    <img src="9.jpg" alt=""height="250px" width="240">
    <p class="name">情侣外套</p>
      <p class="cart">加入购物车</p> 
      <p class="price">￥699</p>
    

</div>


<div class="thing3">
    <img src="10.jpg" alt="" height="250px" width="240">
    <p class="name">条形卫衣</p>
      <p class="cart">加入购物车</p> 
      <p class="price">￥99</p>
      

</div>


<div class="thing4">
    <img src="12.jpg" alt="" height="250px" width="240">
    <p class="name">V领卫衣</p>
     <p class="cart">加入购物车</p>
     <p class="price">￥99</p>
     

</div>


<div class="thing5">
    <img src="13.jpg" alt=""  height="250px" width="240">
    
    <p class="name">超厚外套</p>
     <p class="cart">加入购物车</p>
     <p class="price">￥799</p>
</div>


<div class="thing6">
    <img src="14.jpg" alt=""  height="250px" width="240">
    <p class="name">冬季棉衣</p>
     <p class="cart">加入购物车</p>
     <p class="price">￥799</p>
</div>


<div class="thing7">
    <img src="15.jpg" alt=""  height="250px" width="240">
    <p class="name">高领毛衣</p>
     <p class="cart">加入购物车</p>
     <p class="price">￥199</p>
</div>


<div class="thing8">
    <img src="16.jpg" alt=""  height="250px" width="240">
    <p class="name">印花外套</p>
     <p class="cart">加入购物车</p>
     <p class="price">￥899</p>
</div>


<div class="thing9">
    <img src="17.jpg" alt=""  height="250px" width="240">
    <p class="name">情侣加长</p>
     <p class="cart">加入购物车</p>
     <p class="price">￥599</p>
</div>


<div class="thing10">
    <img src="8.jpg" alt=""  height="250px" width="240">
    <p class="name">情侣加长</p>
     <p class="cart">加入购物车</p>
     <p class="price">￥599</p>
</div>


<div class="thing11">
    <img src="77.jpg" alt=""  height="250px" width="240">
    <p class="name">情侣加长</p>
     <p class="cart">加入购物车</p>
     <p class="price">￥599</p>
</div>


<div class="thing12">
    <img src="88.jpg" alt=""  height="250px" width="240">
    <p class="name">情侣加长</p>
     <p class="cart">加入购物车</p>
     <p class="price">￥599</p>
</div>



</div></div>






    <script>
    var list= document.getElementsByClassName('title');
    var textlist= document.getElementsByClassName('text');
        for( var i = list.length - 1;i >= 0; i--)
            {  list[i].index=i;
               list[i].onclick=function() {
                      for(var j = list.length - 1;j >= 0; j-- ){
                        list[j].className="";
                      }
                      this.className="title active";
               
                      for (var i =textlist.length - 1; i >= 0; i--) {
                     textlist[i].style.display="none";
                      }
                      textlist[this.index].style.display="block";
             }
         }
     </script>

</body>
</html>